<!--
 * @Description: 登录页
 * @Author: 晋龍
 * @Date: 2022-12-18 19:37:57
 * @LastEditors: 晋龍
 * @LastEditTime: 2023-02-18 21:50:04
-->
<template>
  <div class="login">
    <!-- logo -->
    <div class="logo">
      <var-image class="login_logo" src="./image/logo.png" />
    </div>
    <!-- 登录 -->
    <div class="loginBox">
      <div class="loginText">登录</div>
      <!-- 表单 -->
      <var-form ref="form" :disabled="disabled" :readonly="readonly" class="loginForm">
        <var-space direction="column" :size="[14, 0]">
          <!-- 使用手机号密码登录 -->
          <!-- <div v-if="showForm"> -->
          <!-- 手机号 -->
          <div class="userForm">
            <div class="userIcon">
              <var-icon name="account-circle-outline" color="rgb(38,89,247)" size="25px" />
            </div>
            <div class="userName">
              <var-input placeholder="请输入手机号"  v-model="formData.username" :rules="[v => !!v || '手机号不能为空', v => v.length === 11 || '手机号输入错误']"/>
            </div>
            <!-- </div> -->

            <!-- 密码 -->
            <div class="passwordForm">
              <div class="passwordIcon">
                <var-icon name="xml" color="rgb(38,89,247)" size="25px" />
              </div>
              <div class="password">
                <var-input type="password" placeholder="请输入密码" :rules="[(v) => !!v || '密码不能为空']"
                  v-model="formData.password" />
              </div>
            </div>
          </div>

          <!-- 使用手机号验证码登录 -->
          <!-- <div v-else> -->
          <!-- 手机号 -->
          <!-- <div class="phoneForm">
              <div class="phoneIcon">
                <var-icon name="phone-outline" color="rgb(38,89,247)" size="25px" />
              </div>
              <div class="phone">
                <var-input
                  placeholder="请输入手机号"
                  :disabled="disPhone"
                  :rules="[
                    (v) => !!v || '手机号不能为空',
                    (v) => v.length === 11 || '手机号输入错误',
                  ]"
                  v-model="formData.phone"
                />
              </div>
            </div> -->

          <!-- 验证码 -->
          <!-- <div class="codeForm">
              <div class="codeIcon">
                <var-icon
                  name="message-processing-outline"
                  color="rgb(38,89,247)"
                  size="25px"
                />
              </div>
              <div class="code">
                <var-input
                  placeholder="请输入验证码"
                  :rules="[(v) => v.length === 6 || '请输入正确的验证码']"
                  v-model="formData.code"
                />
              </div>
              <var-button :disabled="dis" text class="getCode" @click="getCode()">
                <span v-if="show">获取验证码</span>
                <span v-else>{{ timeCount }}s后重试</span>
              </var-button>
            </div>
          </div> -->

          <!-- 登录按钮 -->
          <div class="loginBtn">
            <var-button type="primary" class="btn" @click="loginClick()">登录</var-button>
          </div>

          <!-- 使用其他方式登录 -->
          <!-- <div class="otherLogin">
            <div v-if="showForm">
              <span class="other">使用</span>
              <span class="other1" @click="shiftLogin()">手机号登录</span>
            </div>
            <div v-else>
              <span class="other">使用</span>
              <span class="other1" @click="shiftLogin()">账号登录</span>
            </div>
          </div> -->

          <!-- 跳转注册 -->
          <div class="toRegister">
            <span>还没有账号？立即</span>
            <span class="register" @click="registerClick()">注册</span>
          </div>

          <!-- 用户协议及隐私协议 -->
          <var-checkbox-group :rules="[
            (v) => v.length > 0 || '您尚未仔细阅读并同意《用户协议》和《隐私协议》',
          ]" v-model="formData.like">
            <var-checkbox :checked-value="1" class="check">
              <div class="agreementCheck">
                <div class="agreement">已阅读并同意</div>
                <div class="agreement1" @click="center = true">《用户协议》</div>
                <div class="agreement">和</div>
                <div class="agreement1" @click="center = true">《隐私协议》</div>
              </div>
            </var-checkbox>
            <!-- 内容 -->
            <var-popup class="popup" v-model:show="center">
              <div class="popup-example-block">
                <div class="title">使用协议与隐私政策</div>
                <div class="content">
                  <div>欢迎来到云课堂。</div>
                  <div class="text">
                    <span
                      class="first">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;为了更透明的呈现数字学院收集和使用您的个人信息的情况，数字学院根据业务实际情况更新了</span>
                    <span class="info">《数字学院平台服务协议》</span>
                    <span>、</span>
                    <span class="info">《数字学院隐私协议》</span>
                    <span>，特向您推送本提示。</span>
                    <div>
                      请您仔细阅读并充分理解相关条款、如您同意本隐私政策内容，请点击“同意”开始使用我们的产品服务。
                    </div>
                    <div>
                      在仅浏览模式下，我们可能会申请系统设备收集设备信息、日志信息、用于信息推送和安全风控、并申请存储权限、用于下载及缓存相关文件。
                    </div>
                  </div>
                </div>
                <div class="agree">
                  <var-button type="primary" class="agreeBtn" @click="agreeClick">同意</var-button>
                </div>
                <div class="scan">
                  <var-button text outline type="primary" class="scanBtn" @click="scanClick">仅浏览</var-button>
                </div>
                <div class="disagree" @click="disagreeClick">不同意，退出</div>
              </div>
            </var-popup>
          </var-checkbox-group>
        </var-space>
      </var-form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { Snackbar } from "@varlet/ui";
import { toRaw } from '@vue/reactivity';
import router from "@/router";
import { storeToRefs } from 'pinia';
import { useUserStore } from '../../stores/user';
import { getUser } from '../../services/user';

const user = useUserStore();
const formData = reactive({
  username: "",
  password: "",
  phone: "",
  code: "",
  like: [],
  studentNumber: "",
  collegeName: "",
});
const form = ref(null);
const center = ref(false);
const disabled = ref(false);
const readonly = ref(false);
const disPhone = ref(false);
const value = ref("");
// const showForm = ref(false);

// 同意勾选
const agreeClick = () => {
  center.value = false;
};

// 验证码
const show = ref(true);
const timeCount = ref(60);
const dis = ref(false);
const countDown = ref();

// 仅浏览
const scanClick = () => {
  center.value = false;
};

// 不同意勾选
const disagreeClick = () => {
  center.value = false;
};

// 获取验证码 倒计时
const getCode = () => {
  let m = /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(
    formData.phone
  );
  if (!formData.phone) {
    setTimeout(() => {
      Snackbar.error("手机号不能为空");
    }, 200);
  } else if (formData.phone.length !== 11) {
    setTimeout(() => {
      Snackbar.error("手机格式错误，请重新输入");
    }, 200);
  } else if (m) {
    countDown.value = setInterval(() => {
      setTimeout(() => {
        if (timeCount.value > 0 && timeCount.value <= 60) {
          show.value = false;
          dis.value = true;
          disPhone.value = true;
          timeCount.value--;
        } else {
          show.value = true;
          dis.value = false;
          disPhone.value = false;
          timeCount.value = 60;
          clearInterval(countDown.value);
        }
      }, 0);
    }, 1000);
  } else if (!m) {
    setTimeout(() => {
      Snackbar.error("手机格式错误，请重新输入");
    }, 200);
  }
};

// 点击登录
const loginClick = async () => {
  if (formData.like[0] === 1) {
    // if (showForm.value) {
    // 手机号和密码登录
    if (formData.username === "" && formData.password === "") {
      setTimeout(() => {
        Snackbar.warning("请输入手机号与密码");
      });
    } else if (formData.username === "") {
      setTimeout(() => {
        Snackbar.warning("请输入手机号");
      });
    } else if (formData.password === "") {
      setTimeout(() => {
        Snackbar.warning("请输入密码");
      });
    } else {
      if (formData.username && formData.password) {
        try {
          let mobileNumber = formData.username;
          let password = formData.password;
          const res = await user.loginCheck(mobileNumber, password)
            if(res.code = 20000){
              Snackbar.success("登录成功");
              localStorage.setItem("token",res.data.data.token)
              const a = await user.getuser()
              const Data = toRaw(a.value);
              // 验证成功，判断是否绑定学号及学院
              if (!Data.userNumber && !Data.collegeId){
                  router.push("/bind");
              }else{
                // 0是教师
                if(Data.userType === 0){
                  router.push("/teachHome")
                }else{
                  router.push("/home");
                }
              }
            }else{
              Snackbar.success("登录失败");
            }
          } catch (error) {
            Snackbar.error("登录失败,请重新输入"+ error.message);
          }
        }
      }
    // }
    // 手机验证码登录
    // else {
    //   console.log("123456", formData.code, "121212");
    //   if (formData.phone === "" && formData.code === "") {
    //     setTimeout(() => {
    //       Snackbar.warning("请输入手机号和验证码");
    //     });
    //   } else if (formData.phone === "" && formData.code !== "") {
    //     setTimeout(() => {
    //       Snackbar.warning("请输入手机号");
    //     });
    //   } else if (formData.phone !== "" && formData.code === "") {
    //     setTimeout(() => {
    //       Snackbar.warning("请输入手机号");
    //     });
    //   } else if (formData.phone !== "" && formData.code !== "") {
    //     if (formData.phone === "13112341234" && formData.code === "123456") {
    //       // 验证成功，判断是否绑定学号及学院
    //       if (formData.studentNumber === "" && formData.collegeName === "") {
    //         router.push("/bind");
    //       } else {
    //         router.push("/home");
    //       }
    //       setTimeout(() => {
    //         Snackbar.success("登录成功");
    //       }, 200);
    //     } else {
    //       setTimeout(() => {
    //         Snackbar.error("手机号或验证码错误，请重试");
    //       }, 200);
    //     }
    //   }
    // }
  } else {
    setTimeout(() => {
      Snackbar.error("请阅读并同意协议");
    }, 200);
  }
  // console.log("username",formData.username);
};

// 点击切换登录方式
// const shiftLogin = () => {
//   console.log(showForm.value);
//   if (showForm.value === false) {
//     console.log(showForm.value);
//     showForm.value = true;
//   } else {
//     showForm.value = false;
//   }
// };

// 点击注册
const registerClick = () => {
  router.push("/register");
};
</script>

<style lang="less" scoped>
.login {
  position: relative;

  .logo {
    width: 60%;
    padding-top: 30%;

    .login_logo {
      margin-left: 15%;
      width: 100%;
    }
  }

  .loginText {
    padding-top: 20%;
    font-size: 24px;
    font-weight: bolder;
    margin-left: 10%;
  }

  .loginForm {
    margin: 10% 10% 0 10%;

    .userForm {
      .userIcon {
        display: inline-block;
        margin-right: 20px;
        margin-top: 0px;
        margin-bottom: 10px;
      }

      .userName {
        display: inline-block;
        width: 240px;
      }
    }

    .passwordForm {
      width: 100%;

      .passwordIcon {
        display: inline-block;
        margin-right: 20px;
      }

      .password {
        display: inline-block;
        width: 240px;
      }
    }

    /* 手机号 */
    .phoneForm {
      width: 100%;

      .phoneIcon {
        position: absolute;
        margin-top: 20px;
        display: inline-block;
      }

      .phone {
        display: inline-block;
        margin-left: 45px;
        width: 240px;
      }
    }

    /* 验证码 */
    .codeForm {
      width: 100%;

      .codeIcon {
        position: absolute;
        margin-top: 20px;
        display: inline-block;
      }

      .code {
        margin-left: 45px;
        display: inline-block;
        width: 135px;
      }

      .getCode {
        color: rgb(38, 89, 247);
        display: inline-block;
        margin-left: 10px;
        line-height: center;
        position: absolute;
        margin-top: 10px;
      }
    }

    .loginBtn {
      margin-top: 60px;

      .btn {
        --button-border-radius: 25px;
        --button-normal-height: 45px;
        --button-normal-padding: 0 130px;
        --button-primary-color: rgb(38, 89, 247);
      }
    }

    .otherLogin {
      margin-top: 20px;
      text-align: center;
      font-size: 14px;
      color: rgb(188, 190, 204);
      font-weight: bolder;

      .other1 {
        color: rgb(38, 89, 247);
      }
    }

    .toRegister {
      margin-top: 20px;
      text-align: center;
      margin-bottom: 80px;
      font-size: 14px;
      color: rgb(188, 190, 204);
      font-weight: bolder;

      .register {
        color: rgb(38, 89, 247);
      }
    }

    .check {
      --checkbox-action-padding: 10px;
      --checkbox-icon-size: 16px;
      --checkbox-checked-color: rgb(38, 89, 247);

      .agreementCheck {
        align-items: center;
        display: inline-block;

        .agreement {
          display: inline-block;
          color: rgb(61, 61, 61);
          font-size: 13px;
        }

        .agreement1 {
          display: inline-block;
          color: rgb(38, 89, 247);
          font-size: 13px;
        }
      }
    }

    .popup {
      border-radius: 20px;

      .popup-example-block {
        padding: 20px 24px;
        height: 560px;
        width: 300px;

        .title {
          font-size: 20px;
          font-weight: bolder;
          text-align: center;
          margin-top: 20px;
          margin-bottom: 20px;
        }

        .content {
          margin-bottom: 20px;
          font-size: 15px;
          color: rgb(129, 129, 129);

          .text {
            .first {
              text-indent: 2em;
              margin: 0;
              padding: 0;
            }

            .info {
              color: rgb(38, 89, 247);
            }
          }
        }

        .agree {
          text-align: center;
          margin-bottom: 15px;

          .agreeBtn {
            font-weight: bolder;
            --button-border-radius: 25px;
            --button-normal-height: 45px;
            --button-normal-padding: 0 100px;
            --button-primary-color: rgb(38, 89, 247);
          }
        }

        .scan {
          text-align: center;
          margin-bottom: 15px;

          .scanBtn {
            font-weight: bolder;
            --button-border-radius: 25px;
            --button-normal-height: 45px;
            --button-normal-padding: 0 100px;
            --button-primary-color: rgb(155, 158, 180);
          }
        }

        .disagree {
          font-weight: bolder;
          text-align: center;
          color: rgb(168, 172, 190);
        }
      }
    }
  }
}
</style>
